<div class="flex mx-auto w-full">

  <!-- Sidebar -->
  <aside class="w-1/6 bg-white text-black dark:text-white dark:bg-gray-800 p-4">
    <h2 class="text-xl font-semibold mb-4">Developer Dashboard</h2>
    <nav>
      <ul class="space-y-2">
        <li class="block px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
              Overview
            </div>
          </a>
        </li>
        <li class="block px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gamepad-2"><line x1="6" x2="10" y1="11" y2="11"/><line x1="8" x2="8" y1="9" y2="13"/><line x1="15" x2="15.01" y1="12" y2="12"/><line x1="18" x2="18.01" y1="10" y2="10"/><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/></svg>
              Published Games
            </div>
          </a>
        </li>
        <li class="block px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users-round"><path d="M18 21a8 8 0 0 0-16 0"/><circle cx="10" cy="8" r="5"/><path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"/></svg>
              Members
            </div>
          </a>
        </li>
        <li class="block px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cog"><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"/><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/><path d="M12 2v2"/><path d="M12 22v-2"/><path d="m17 20.66-1-1.73"/><path d="M11 10.27 7 3.34"/><path d="m20.66 17-1.73-1"/><path d="m3.34 7 1.73 1"/><path d="M14 12h8"/><path d="M2 12h2"/><path d="m20.66 7-1.73 1"/><path d="m3.34 17 1.73-1"/><path d="m17 3.34-1 1.73"/><path d="m11 13.73-4 6.93"/></svg>
              Settings
            </div>
          </a>
        </li>
      </ul>
    </nav>
  </aside>

  <!-- Main Content -->
  <main class="flex-1 p-6 bg-gray-100 dark:bg-gray-900 dark:text-white">
    
    <!-- Dashboard Header -->
    <div class="mb-6">
      <h1 class="text-3xl font-semibold text-gray-800 dark:text-white">Overview</h1>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Live Games</h3>
        <p class="text-2xl font-bold text-red-400">1</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Active Sessions</h3>
        <p class="text-2xl font-bold text-red-400">123</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Active Voice Calls</h3>
        <p class="text-2xl font-bold text-red-400">1</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Active Proximity Chats</h3>
        <p class="text-2xl font-bold text-red-400">3</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Active Lobbies</h3>
        <p class="text-2xl font-bold text-red-400">12</p>
      </div>
    </div>

    <!-- Recent Logs Table -->
    <div class="bg-white dark:bg-gray-800 p-4 mb-6 rounded shadow">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-white mb-4">System Event Log</h2>
      <table class="w-full text-left">
        <thead>
          <tr class="border-b">
            <th class="px-4 py-2 text-gray-600 dark:text-white font-semibold">Timestamp</th>
            <th class="px-4 py-2 text-gray-600 dark:text-white font-semibold">Class</th>
            <th class="px-4 py-2 text-gray-600 dark:text-white font-semibold">Description</th>
            <th class="px-4 py-2 text-gray-600 dark:text-white font-semibold">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
            <td class="px-4 py-2">nil</td>
            <td class="px-4 py-2">Session</td>
            <td class="px-4 py-2">Authenticate user 45678</td>
            <td class="px-4 py-2 text-green-600">Successful</td>
          </tr>
          <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
            <td class="px-4 py-2">nil</td>
            <td class="px-4 py-2">Signaling</td>
            <td class="px-4 py-2">Initialize message relay in game ID 1234</td>
            <td class="px-4 py-2 text-green-600">Successful</td>
          </tr>
          <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
            <td class="px-4 py-2">nil</td>
            <td class="px-4 py-2">Developer Registration</td>
            <td class="px-4 py-2">Register developer ID 34567</td>
            <td class="px-4 py-2 text-yellow-600">Awaiting Approval</td>
          </tr>
          <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
            <td class="px-4 py-2">nil</td>
            <td class="px-4 py-2">Game Submission</td>
            <td class="px-4 py-2">Developer ID 12345 submitted game ID 4567</td>
            <td class="px-4 py-2 text-yellow-600">Awaiting Approval</td>
          </tr>
          <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
            <td class="px-4 py-2">nil</td>
            <td class="px-4 py-2">Game Review</td>
            <td class="px-4 py-2">Developer ID 12345 game ID 3456</td>
            <td class="px-4 py-2 text-red-600">Denied</td>
          </tr>
          <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
            <td class="px-4 py-2">nil</td>
            <td class="px-4 py-2">Game Review</td>
            <td class="px-4 py-2">Developer ID 12345 game ID 1234</td>
            <td class="px-4 py-2 text-green-600">Approved</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Dashboard Header -->
    <div class="mb-6">
      <h1 class="text-3xl font-semibold text-gray-800 dark:text-white">Published Games</h1>
    </div>

    <!-- Display cards of published games -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">

      <!-- Example of a approved game that is currently live -->
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
        <img src="/assets/static/img/dummy1.png" alt="Game Image" class="w-full h-48 object-cover mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Game Name</h3>
        <p class="text-gray-600 dark:text-gray-400">Game ID</p>
        <div class="flex items-center gap-2 mt-2 mb-2">
          <span class="inline-flex items-center gap-1 px-2 py-1 mb-1 rounded-full text-xs font-medium 
                     bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300">
              <span class="w-2 h-2 rounded-full bg-green-600 dark:bg-green-400"></span>
              Live
          </span>
        </div>
        
        <div class="mt-4b pb-2 px-4 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
              Manage
            </div>
          </a>
        </div>
      </div>

      <!-- Example of a approved game but is scheduled to go live -->
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow ">
        <img src="/assets/static/img/dummy2.png" alt="Game Image" class="w-full h-48 object-cover mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white text-ellipsis overflow-hidden">CatChat Remastered</h3>
        <p class="text-gray-600 dark:text-gray-400">123456</p>
        <div class="flex items-center gap-2 mt-2 mb-2">
          <span class="inline-flex items-center gap-1 px-2 py-1 mb-1 rounded-full text-xs font-medium 
                     bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
              <span class="w-2 h-2 rounded-full bg-blue-600 dark:bg-blue-400"></span>
              Scheduled Release
          </span>
        </div>
        <div class="mt-4b mb-2 px-4 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
              Manage
            </div>
          </a>
        </div>
        <div class="mt-4b mb-2 px-4 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>
              Publish Now 
            </div>
          </a>
        </div>
      </div>

      <!-- Example of a game that is pending approval by an admin -->
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow ">
        <img src="/assets/static/img/dummy3.png" alt="Game Image" class="w-full h-48 object-cover mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white text-ellipsis overflow-hidden">Cloud Platformer Multiplayer Fun</h3>
        <p class="text-gray-600 dark:text-gray-400">123456</p>
        <div class="flex items-center gap-2 mt-2 mb-2">
          <span class="inline-flex items-center gap-1 px-2 py-1 mb-1 rounded-full text-xs font-medium 
                     bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300">
              <span class="w-2 h-2 rounded-full bg-yellow-600 dark:bg-yellow-400"></span>
              Pending Approval
          </span>
        </div>
        <div class="mt-4b mb-2 px-4 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
              Manage
            </div>
          </a>
        </div>
        <div class="mt-4b mb-2 px-4 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
              Review Log 
            </div>
          </a>
        </div>
      </div>

      <!-- Example of a game that was rejected -->
      <div class="bg-white dark:bg-gray-800 p-4 rounded shadow ">
        <img src="/assets/static/img/dummy4.png" alt="Game Image" class="w-full h-48 object-cover mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-white text-ellipsis overflow-hidden">SB-3: The story of the project whose name was stolen</h3>
        <p class="text-gray-600 dark:text-gray-400">123456</p>
        <div class="flex items-center gap-2 mt-2 mb-2">
          <span class="inline-flex items-center gap-1 px-2 py-1 mb-1 rounded-full text-xs font-medium 
                     bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300">
              <span class="w-2 h-2 rounded-full bg-red-600 dark:bg-red-400"></span>
              Rejected
          </span>
        </div>
        <div class="mt-4b mb-2 px-4 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
              Manage
            </div>
          </a>
        </div>
        <div class="mt-4b mb-2 px-4 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
          <a href="#">
            <div class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>
              View Review 
            </div>
          </a>
        </div>
      </div>
    </div>

  </main>
</div>